import React from 'react';
import { connect } from 'dva';
import { Select, DatePicker, Button, Table, Pagination } from 'antd';
import { VtxGrid } from 'vtx-ui';
import { NAME_SPACE } from '../../components/CarViolationManage/config'
import styles from './carViolationManage.less'
import moment from 'moment'
import ViewItem from '../../components/CarViolationManage/ViewItem'

const Option = Select.Option
const { RangePicker } = DatePicker

const Index = ({dispatch, carViolationManage}) => {

  const {
    loading,
    pageNo,
    pageSize,
    total,
    searchParams,
    oldSearchParams,
    selectedRowKeys,
    modelVisable,
    details,
  } = carViolationManage;

  // 选择条件
  const vtxGridProps = {
    titles: ['报警时间', '报警类型', '车牌号'],
    gridweight: [2,1,1],
    // 点击确定
    confirm: () => {},
    // 重置
    clear: () => {},
  };

  // 日期处理
  const getMomentDate = (dateString) => {
    if (!dateString) return "";
    return moment(dateString);
  } 
  // 时间
  const rangePickerProps = {
    style: { width: '100%' },
    showTime: true,
    format: "YYYY-MM-DD",
    value: [getMomentDate(), getMomentDate()],
    onChange: (dateMoment, dateStr) => {}
  }

  // 表格
  const tableProps = {
    autoFit: true,
    hideColumn: false,
    indexColumn: true,
    showHeader: true,
    startIndex: (pageNo) * pageSize + 1,
    dataSource: [],
    loading: loading,
    pagination: false,
    columns: [
      {
        title: '序号', 
        key: '0',
        dataIndex: '0',
        ellipsis: true,
        // render: (text, record) => <span>
        //     <span style={{width: 5, height: 20, backgroundColor: record.is == 1 ? '#52c41a' : 'fc1808', position: 'absolute', left: 0}}></span>
        // </span>
      },{
        title: '报警时间', 
        key: '1',
        dataIndex: '1',
        ellipsis: true,
      },{
        title: '报警类型', 
        key: '2',
        dataIndex: '2',
        ellipsis: true,
      },{
        title: '车牌号', 
        key: '3',
        dataIndex: '3',
        ellipsis: true,
      },{
        title: '作业人员', 
        key: '4',
        dataIndex: '4',
        ellipsis: true,
      },{
        title: '报警地点', 
        key: '5',
        dataIndex: '5',
        ellipsis: true,
      },{
        title: '是否处理', 
        key: '6',
        dataIndex: '6',
        ellipsis: true,
      },{
        title: '操作', 
        key: '7',
        dataIndex: '7',
        ellipsis: true,
        render: (text, record, index) => {
          return(
            <div className={styles.toDo}>
              
                <a>查看</a>
                <a>查看</a>|<a>解除警报</a>
              
            </div>
          )
        }
      },
    ],
    rowKey: (record, index) => {
      
    },
    rowSelection: {
      type: 'checkbox',
      selectedRowKeys: selectedRowKeys || [],
      onChange: (selectedRowKeys, selectedRows) => {
        let ids = selectedRows.map((item) => {
            return item.id;
        });
        dispatch({
          type: `${NAME_SPACE}/updateState`,
          payload: {
            selectedRowKeys: ids
          }
        })
        // updateState({ selectedRowKeys: ids})
      },
    },
  };
  // 表格分页
  const pagProps = {
    current: pageNo + 1,
    defaultCurrent: 1,
    total: total,
    pageSize: pageSize,
    showQuickJumper: true,
    showSizeChanger: true,
    onChange: (page) => {
      dispatch({
        type: `${NAME_SPACE}/updateState`,
        payload: {
          pageNo: page - 1
        }
      });
      // dispatch({
      //   type: `${NAME_SPACE}`
      // })
    },
    showTotal: (total) => {
        return `合计${total}条数据`
    },
    onShowSizeChange: (current, pageSize) => {
      dispatch({
        type: `${NAME_SPACE}/updateState`,
        payload: {
          pageNo: 0,
          pageSize: pageSize,
        }
      })
    },
  };

  // 弹窗
  const viewProps={
    dispatch,
    modelVisable,
    details,
  }

  return(
    <div className={styles.normal}>
      {/* 详情弹窗 */}
      <ViewItem {...viewProps}/>
      <div className={styles.header}>
        <VtxGrid {...vtxGridProps}>
          <RangePicker {...rangePickerProps}/>
          <Select
            style={{ width: '100%' }}
            allowClear={true}
            // value={}
            // onChange={(value) => {selectChange()}}
          >

          </Select>
          <Select
            style={{ width: '100%' }}
            allowClear={true}
            // value={}
            // onChange={(value) => {selectChange()}}
          >

          </Select>
        </VtxGrid>
      </div>
      <div className={styles.legend}>
        <div className={styles.state}>处理状态：</div>
        {/* 添加点击事件：添加进条件，然后立即执行 */}
        <div className={`${styles.divBase}`} onClick={() => {}}>全部</div>
        <div className={`${styles.divBase} ${styles.marginBase}`} style={{backgroundColor: '#0fd14f'}}>已解除</div>
        <div className={`${styles.divBase} ${styles.marginBase}`} style={{backgroundColor: '#FF6767'}}>未解除</div>
      </div>
      <div className={styles.table} style={{ height: document.documentElement.clientHeight-90 }}>
        <div className={styles.tableContent}>
          <Table {...tableProps}/> 
        </div>  
        <div className={styles.pagination}>
          <span className={styles.pagContent}> <Pagination {...pagProps}/> </span>  
        </div>  
      </div> 
    </div>
  )
}
export default connect(state=>state)(Index);